<script setup>
import { useProjectCreate, useOverride } from './composables/project-create';
import basic from '@common/basic';
import { Search, ArrowDown, Folder, Document } from '@element-plus/icons-vue'
const attrConfigurationForm = basic.getExportResource('src/basic/business-modules/attr-configuration-form/attr-configuration-form.vue').default;
//import attrConfigurationForm from './attr-configuration-form.vue'
// script
defineOptions({
  name: 'ProjectCreate'
});

const {
  handleKFL,
  devOrderDetail,
  isFromDevOrder,
  formData,
  upload,
  typeOptions,
  planOptions,
  useOptions,
  rules,
  formRef,
  ibaForm,
  tyProjectForm,
  phaseOptions,
  isAddparameter,
  valideIbaForm,
  change,
  changeTemplate,
  dialogVisible,
  tableData,
  total,
  currentPage,
  pageSize,
  selectedRow,
  onSearchProjectDevOrder,
  handleCurrentChange,
  handlePageChange,
  handleConfirm,
  handleCancel,
  searchDevOrderNumber,
  searchDevOrder,
  clearSearch, // 新增
  getRowClassName,
  tableRef,
  clearDevOrderData,
  ProjectTemplateList,
  templateTree,
  templatePopoverVisible,
  treeRef,
  selectedTemplateName,
  handleNodeClick,
  toggleDropdown,
  handleClickOutside
} = useProjectCreate();

defineExpose({
  formRef,
  formData,
  upload,
  valideIbaForm
});



</script>

<template>
  <div>
    <ty-plm-form ref="formRef" :options="{
      model: formData,
      rules: rules,
      labelPosition: 'right',
      labelWidth: '142px',
      refName: 'formRef'
    }">
      <ty-plm-form-item :label="$t('projectType')" prop="typeOid">
        <ty-type style="width: 100%" :options="typeOptions" :isSelectFirst="true" :openHandleDisable="true"
          @change="change" v-model="formData.typeOid"></ty-type>
      </ty-plm-form-item>
         <!-- 添加选择项目开发令的按钮 -->
    <div style="width: 568px; display: flex; justify-content: flex-end;">
      <el-form :model="formData">
        <el-form-item label="项目开发令：" prop="projectDevOrder" label-position="right">
          <div style="width: 424px; margin-left: auto; display: flex; align-items: center;">
            <el-input v-model="formData.projectDevOrder" disabled placeholder="请选择项目开发令" readonly style="width: 100%;" />
            <el-button type="primary" @click="handleKFL" style="margin-left: 8px;">
              选择
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
      <ty-plm-form-item :label="$t('projectName')" prop="name">
        <ty-plm-input v-model="formData.name"   @change="changeName"  :options="{
          showWordLimit: true,
          maxlength: 200,
          placeholder: '选择开发令后自动带出',
          disabled: true
          
        }"></ty-plm-input>
      </ty-plm-form-item>
     
      <!-- <ty-plm-form-item :label="$t('projectNumber')" prop="projectNumber">
        <ty-project-number v-model="formData.projectNumber" :options="{
          disabled: isFromDevOrder
        }"></ty-project-number>
      </ty-plm-form-item> -->
      <!-- <ty-plm-form-item :label="$t('planDate')" prop="planDate">
        <ty-plm-time-date v-model="formData.planDate" :options="planOptions"></ty-plm-time-date>
      </ty-plm-form-item>
      <ty-plm-form-item :label="$t('duration')" prop="contractDuration">
        <ty-plm-input v-model="formData.contractDuration" style="width: 200px" :options="{
          dataType: 'number',
          controlsPosition: 'right',
          placeholder: $t('pls'),
          min: 0
        }"></ty-plm-input>
      </ty-plm-form-item>

      <ty-plm-form-item :label="$t('phase')" prop="phase">
        <ty-plm-select v-model="formData.phase" :options="phaseOptions"></ty-plm-select>
      </ty-plm-form-item> -->

      <!-- 新增 -->
      <!-- 项目模板选择 -->
      <ty-plm-form-item :label="$t('projectTemplate')" prop="planTemplateName">
        <div style="position: relative; width: 100%;">
          <el-input v-model="selectedTemplateName" :placeholder="isFromDevOrder ? $t('plsSelect') : '请先选择项目开发令'"
            readonly :disabled="!isFromDevOrder" style="width: 100%; cursor: pointer;"
            @click="isFromDevOrder && toggleDropdown()">
            <template #suffix>
              <el-icon v-if="isFromDevOrder" :class="{ 'rotate-180': templatePopoverVisible }"
                style="transition: transform 0.3s;">
                <ArrowDown />
              </el-icon>
            </template>
          </el-input>

          <!-- 下拉列表 -->
          <div v-if="templatePopoverVisible && isFromDevOrder" style="
              position: absolute; 
              top: 100%; 
              left: 0; 
              right: 0; 
              background: white; 
              border: 1px solid #dcdfe6; 
              border-radius: 4px; 
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
              z-index: 2000; 
              max-height: 300px; 
              overflow-y: auto;
              margin-top: 2px;
            ">
            <div style="padding: 10px;">
              <div v-if="templateTree.length === 0" style="padding: 20px; text-align: center; color: #999;">
                暂无数据
              </div>

              <el-tree v-else ref="treeRef" :data="templateTree" :props="{ label: 'name', children: 'children' }"
                @node-click="handleNodeClick" node-key="oid" :expand-on-click-node="true" :default-expand-all="false">
                <template #default="{ node, data }">
                  <div style="display: flex; align-items: center; width: 100%; padding: 4px 0; cursor: pointer;"
                    @click.stop="handleNodeClick(data, node)">
                    <el-icon style="margin-right: 6px; color: #909399;">
                      <Folder v-if="data.otype !== 'ty.projectmng.admin.CTyProjectTemplate'" />
                      <Document v-else />
                    </el-icon>
                    <span :style="{
                        color: data.otype === 'ty.projectmng.admin.CTyProjectTemplate' ? '#409EFF' : '#606266',
                        fontWeight: data.otype === 'ty.projectmng.admin.CTyProjectTemplate' ? 'bold' : 'normal'
                      }">
                      {{ data.name }}
                    </span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
      </ty-plm-form-item>

      <!-- <ty-plm-form-item :label="$t('projectAdmin')" prop="owner">
        <ty-plm-choose-member v-model="formData.owner" :options="{
          ...useOptions,
          disabled: isFromDevOrder
        }" />
      </ty-plm-form-item> -->
      <!-- <ty-plm-form-item :label="$t('projectManager')" prop="projectManagerList">
        <ty-plm-choose-member v-model="formData.projectManagerList" style="width: 100%"
          :options="{ ...useOptions, multiple: true, showConfirmButton: true, showInput: true, triggerEl: 'select' }" />
      </ty-plm-form-item> -->
      <!-- <ty-plm-form-item :label="$t('templateStartDate')" prop="templateStartDate" v-if="formData.planTemplateOID">
        <ty-plm-time-date :options="{
          format: 'YYYY-MM-DD HH:mm:ss',
          'value-format': 'YYYY-MM-DD HH:mm:ss'
        }" style="width: 100%" v-model="formData.projectTemplateObj.templateStartDate"></ty-plm-time-date>
      </ty-plm-form-item>

      <ty-plm-form-item :label="$t('templateFinishDate')" prop="templateFinishDate" v-if="formData.planTemplateOID">
        <ty-plm-time-date :options="{
          format: 'YYYY-MM-DD HH:mm:ss',
          'value-format': 'YYYY-MM-DD HH:mm:ss'
        }" style="width: 100%" v-model="formData.projectTemplateObj.templateFinishDate"></ty-plm-time-date>
      </ty-plm-form-item> -->
      <ty-plm-form-item :label="$t('linkExport')" prop="resousceFalg" v-if="formData.planTemplateOID">
        <ty-plm-checkbox v-model="formData.projectTemplateObj.resousceFalg" :options="{
          label: $t('teamAndResource')
        }"></ty-plm-checkbox>
      </ty-plm-form-item>
      <ty-plm-form-item :label="$t('file')" prop="file">
        <ty-plm-file-upload ref="upload" :options="{
          multipleSelect: true
        }"></ty-plm-file-upload>
      </ty-plm-form-item>
      <!-- <ty-plm-form-item :label="$t('table.description')" prop="description">
        <ty-plm-input v-model="formData.description" :options="{
          type: 'textarea',
          rows: 3,
          placeholder: $t('pls'),
        }"></ty-plm-input>
      </ty-plm-form-item> -->
    </ty-plm-form>
      扩展属性
    <attr-configuration-form ref="ibaForm" :form="tyProjectForm" class="task-project" :isAddparameter="isAddparameter"
      labelWidth="120px" :oneLine="true" v-if="tyProjectForm?.formData.length" :col="12" />
  </div>
    <el-dialog v-model="dialogVisible" title="选择项目开发令" width="80%">
      <!-- 在表格上方添加搜索框 -->
      <div style="margin-bottom: 16px; display: flex; align-items: center;">
        <el-input v-model="searchDevOrderNumber" placeholder="请输入项目开发令进行搜索" @keyup.enter="searchDevOrder(false, true)"
          style="width: 300px; margin-right: 8px;" clearable>
          <template #append>
            <el-button @click="searchDevOrder(false, true)">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-button @click="searchDevOrder(false, true)" type="primary">搜索</el-button>
        <el-button @click="clearSearch">清空</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" @current-change="handleCurrentChange" :row-key="row => row.id"
        highlight-current-row :row-class-name="getRowClassName" ref="tableRef">
        <el-table-column prop="dev" label="开发令" />
        <el-table-column prop="model" label="机型号" />
        <el-table-column prop="number" label="项目开发令" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="productCategory" label="产品类别" />
        <el-table-column prop="productSeries" label="产品系列" />
        <el-table-column prop="sector" label="项目板块" />
        <el-table-column prop="level" label="开发分级" />
        <el-table-column prop="subLevel" label="开发等级" />
        <el-table-column prop="developmentType" label="开发类型" />
        <el-table-column prop="system" label="系数" />
        <el-table-column prop="owner" label="项目经理" />
        <el-table-column prop="boost" label="推进方式" />
      </el-table>
      <div style="margin: 16px 0; display: flex; justify-content: space-between; align-items: center;">
        <div style="flex: 1;">
          <span>共 {{ total }} 项数据</span>
        </div>
        <div style="flex: 1; display: flex; justify-content: center;">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handlePageChange" />
        </div>
        <div style="flex: 1; display: flex; justify-content: flex-end;">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
</template>

<style scoped>
.selected-row {
  background-color: #f0f9ff !important;
}

.el-table .selected-row td {
  background-color: #f0f9ff !important;
}

.rotate-180 {
  transform: rotate(180deg);
}
</style>
